
<template>
  <div id="brandListD" :class='{"isiphone":$isiphone}'>
    <div>
      <div class="top">
        <div class="header">
          {{detail.brandName}} <div @click="linkTo" class="icon"></div>
        </div>
        <div class="one">
          <div class="top-img">
            <img :src="brandImg" alt @click="pre">
          </div>
           <div v-html="detail.introduction" class="desc">
           </div>
        </div>
      </div>
      <div class="middle">
        <p class='newTitle'>
          <span>商品</span>
        </p>
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <li v-for="(item, index) in goodList"  :key="index" @click="JumpItem(item)">
            <img :src="item.img" alt>
            <div class="good-desc">
               <p>{{item.name}}</p>
              <span>¥ {{item.money}}</span>
            </div>
          </li>
         
        </ul>
        <p v-if="detail.isApplyShop == 'y'" class='newTitle'>
          <span>适用门店</span>
        </p>
        <div v-if="detail.isApplyShop == 'y'"  v-html="detail.shopIntroduction" class="desc">
        </div>
      </div>
    </div>
    <div  @click="scrollTopBtn" class="top-icon">
      <img src="../../../wechat/static/images/top.png" alt="">
    </div>
  </div>
</template>

<script>
import { LoadMore } from "vux";
export default {
  name: "brandListD",
  data() {
    return {
      goodList: [
      ],
      brandId: '', //品牌
      brandImg: '', //品牌
      brandName: "", //品牌名
      isOn: "y", //是否上架
      isOpen: "", //是否公开
      notOpenIds: "", //非公开商品id
      openIds: "", //公开商品id
      pageIndex: 1, //第几页
      pageSize: 10, //每页大小
      type: "", //类型
      onFetching: false,
      isloading: false,
      isNoData: false,
      detail:{}
    };
  },
  computed:{
  },
  activated(){
    if(this.$route.query.id==localStorage.getItem('brandListDId')){
        var item = JSON.parse(localStorage.getItem('brandListDItem'))
        this.brandId = item.key
        this.brandImg = item.img
        this.brandName = item.value
        this.pageIndex = 1
        this.brandId = this.$route.query.id
        this.isloading = false
        this.isNoData = false
        this.goodList = []
        this.findEsBrandByPage()
    }else {
      this.goodList = []
      this.findEsBrandByPage()
    }
    localStorage.setItem('brandListDId',this.$route.query.id)
  },
  mounted() {
    this.findEsBrandByPage()
    localStorage.setItem('brandListDId',this.$route.query.id)
  },
  created() {},
  methods: {
    scrollTopBtn(){
      document.body.scrollTop=document.documentElement.scrollTop=0
    },
    findEsBrandByPage() {
      let userType = localStorage.getItem('userType')
      let url =
        this.$CONSTANT.GOODS.findEsBrandByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        // cityCode: this.cityCode,
        pageIndex: 1, //第几页
        pageSize: 1000, //每页大小
        isCustomUser:userType == 'special'?'y':'',
        isNormalUser:userType == 'normal'?'y':''
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.map(item=>{
            if(item.id == this.$route.query.id){
              this.detail = item
              this.brandId = item.id
              this.brandImg = item.photos[0].fileUrl
              this.brandName = item.value
              this.getList()
            }
          })
          console.log(bussData,'bussData')
        } else { }
      });
    },
    linkTo(){
      this.$router.push('/birPool')
    },
    pre(){
      wx.previewImage({
		  	current: this.brandImg, // 当前显示图片的http链接
		  	urls: [this.brandImg] // 需要预览的图片http链接列表
      })
    },
    getList() {
      let url =
        this.$CONSTANT.GOODS.findEsGoodsByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        brandIds: [parseInt(this.brandId)], //品牌
        // goodsName: this.brandName, //品牌名
        isOn: this.isOn, //是否上架
        isOpen: this.isOpen, //是否公开
        isUseRest: 'y',
        pageIndex: 1, //第几页
        pageSize: 1000, //每页大小
      };
      console.log(param)
      // this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        this.isloading = false
        this.pageIndex++
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 800);
        if (res.status == 200) {
          this.goodList = []
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.restNum>0){
              this.goodList.push({
                id: element.id,
                img: element.photos.length>0?element.photos[0].fileUrl:'',
                name: element.goodsName,
                money: element.price
              });
            }
            if(element.type=='real'&&element.modelPrice){
              let arr = element.modelPrice.split('::')
              let arr2 = []
              arr.map(item=>{
                let arr1 = item.split('&&')
                arr2.push({
                  name:arr1[0],
                  price:arr1[1]
                })
              })
              this.goodList[this.goodList.length-1].money=arr2[0].price
            }
          });
          if(bussData.length <this.pageSize) {
            this.isNoData = true
          }
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    JumpItem(item) {
      this.$router.push({ path: "/goodD", query: { id: item.id } });
    },
  },
  components: {
    LoadMore
  }
};
</script>

<style lang="less">
#brandListD {
  overflow: hidden;
  .top {
    background: #fff;
    .header{
      height: 35px;
      line-height: 35px;
      width: 100%;
      text-align: center;
      background-color: #EDEDED;
      position: relative;
      .icon{
        background-image: url('../../../wechat/static/images/home.png');
        background-size: 100% 100%;
        height: 17.5px;
        width: 19px;
        position: absolute;
        right: 10px;
        top: 9px;
      }
    }
    .one {
        text-align: center;
        font-family: PingFang-SC-Medium;
        color: #333;
        font-size: 13px;
        padding-bottom: 21px;
        .top-img{
           border-bottom: 1px solid #EBEBEB;
        }
        .desc{
          padding-top: 17px;
          text-align: left;
          padding:17px 10px 20px 10px;
          img{
            max-width: 100%;
          }
        }
        img{
            width: 73.5px;
            height:73.5px;
            display: block;
            object-fit: cover;
            margin: 20px auto 18px;
        }
    }
  }
  .middle {
     background:rgba(237,237,237,1);
    p.newTitle{
        text-align: center;
        height:36px;
        background:rgba(237,237,237,1);
        line-height: 36px;
        font-size:15px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
      i{
          margin-right: 8px;
          height: 14px;
          width: 3px;
          display: inline-block;
          border-radius: 3px;
          background: #EC1B24;
      }
      span{
          font-family: PingFang-SC-Bold;font-weight: 600;
            color: #333;
            font-size: 15px;
      }
    }
    .desc{
      background-color: #fff;
      font-family: PingFang-SC-Medium;
      color: #333;
      font-size: 13px;
      padding:20px 10px 20px 10px;
      img{
        max-width: 100%;
      }
    }
    ul {
      li {
        background: #fff;
        border: 0px solid transparent;
        margin-bottom: 10px;
        height: 84.5px;
        display: flex;
        padding:13px 15px;
        width: 100%;
        &:last-child{
          margin-bottom: 0;
        }
        img {
          display: inline-block;
          width: 84px;
          height: 84px;
          object-fit: contain;
        }
        .good-desc{
          width: 237px;
          margin-left: 10px;
        }
        p {
          // padding: 12px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #333;
          font-size:14px;
          font-family:PingFang SC;
          font-weight:bold;
          color:rgba(51,51,51,1);
          // height: 9%;
        }
        span {
          display: inline-block;
          font-family: PingFang-SC-Bold;font-weight: 600;
          color: #ea030b;
          font-size: 12px;
          margin-top: 13px;
        }

      }
    }
  }
}
</style>
